import React, { useEffect, useState } from 'react'
import { Action, SearchForm, TableCard } from "components";
import { Table, Select, Input, Button, message, Tag, Popconfirm, DatePicker } from 'antd';
import { getSyncLogs } from "./service";
const Report = () => {


  useEffect(() => {
    Getdata();
  }, []);



  const [dataSource, setDataSource] = useState([]);

  const [isFetching, setIsFetching] = useState(false);

  const [Total, setTotal] = useState(0);

  const [SearchParams, setSearchParams] = useState({
    current: 1,
    pageSize: 10,
    command_id: "",
    lock_type: "",
    locker_number: "",
    locker_name:"",
    result:"",
    start_time:"",
    end_time:""
  });

  const Getdata = () => {
    setIsFetching(true);
    getSyncLogs(SearchParams).then(({ data }) => {
      console.log(data)
      setDataSource(data.list)
      setTotal(data.total)
      setIsFetching(false);
    });
  };

  return (
    <div>

    <SearchForm>
        <SearchForm.Item span={8} title="柜号">
          <Input allowClear placeholder="请输入" onChange={(e) => {
            console.log(e.target.value)
            Getdata({ ...SearchParams, locker_number: e.target.value })
            setSearchParams({ ...SearchParams, locker_number: e.target.value })
          }} />
        </SearchForm.Item>
        <SearchForm.Item span={8} title="卡号">
          <Input allowClear placeholder="请输入" onChange={(e) => {
            console.log(e.target.value)
            Getdata({ ...SearchParams, card_id: e.target.value })
            setSearchParams({ ...SearchParams, card_id: e.target.value })
          }} />
        </SearchForm.Item>
        {/* <SearchForm.Item span={8} title="开锁类型">
          <Select allowClear placeholder="请选择"

            options={card_type}
            onChange={(value) => {
              console.log(value)
              Getdata({ ...SearchParams, card_type: value })
              setSearchParams({ ...SearchParams, card_type: value })
              console.log(value)
            }}></Select>
        </SearchForm.Item> */}


        <SearchForm.Item span={8} title="开始时间">
          <DatePicker
            placeholder="请选择"
            showTime
            format={"YYYY-MM-DD HH:mm:ss"}
            onChange={(value, dateString) => {
              console.log(dateString)

              Getdata({ ...SearchParams, start_time: dateString })
              setSearchParams({ ...SearchParams, start_time: dateString })
            }}
          />

        </SearchForm.Item>

        <SearchForm.Item span={8} title="结束时间">
          <DatePicker
            placeholder="请选择"
            showTime
            format={"YYYY-MM-DD HH:mm:ss"}
            onChange={(value,dateString) => {
              console.log(value)
              Getdata({ ...SearchParams, end_time: dateString })
              setSearchParams({ ...SearchParams, end_time: dateString })
            }}
          />
        </SearchForm.Item>
      </SearchForm>


      <TableCard
        loading={isFetching}
        rowKey="id"
        dataSource={dataSource}
        onReload={Getdata}

        pagination={{
          showSizeChanger: true,
          showLessItems: true,
          showTotal: total => `共 ${Total} 条`,
          total: Total,
          current: SearchParams.page,
          pageSizeOptions: ['10', '20', '50', '100']
        }}
      >
        <Table.Column title="柜名" dataIndex="locker_name" />
        <Table.Column title="锁类型" dataIndex="lock_type" />
        <Table.Column title="指令ID" dataIndex="command_id" />
        <Table.Column title="错误信息" dataIndex="error_message" />
        <Table.Column title="结果" dataIndex="result" render={(text) => (
          <>
            {text === 0 ? <Tag color="green">成功</Tag> : <Tag color="red">失败</Tag>}
          </>

        )} />
        <Table.Column title="JSON数据" dataIndex="sync_data" />
        <Table.Column title="上报时间" dataIndex="sync_time" />
        {/* <Table.Column title="备注" dataIndex="description" /> */}
        <Table.Column width={180} title="操作" render={info => (
          <Action>

          </Action>
        )} />
      </TableCard>
    </div>
  )
}

export default Report